import React, {useState} from 'react'
// @ts-ignore
import styles from './index.less'
import ImageUpload from '@/components/ImageUpload'
import AddressChooseMap from "@/components/AddressChooseMap";
import RichTextEditor from "@/components/RichTextEditor";
import HTMLPreview from "@/components/HTMLPreview";
import { Button } from 'antd'
import 'antd/dist/antd.css';
// import 'https://oss.health2m.com/static/sdk/tinymce/tinymce.min.js'

export default function test(){
  const [addressMapVisible, setAddressMapVisible] = useState(false)
  const [address, setAddress] = useState('')
  const [htmlContent, setHtmlContent] = useState('')
  return <div className={styles.container}>
    <div>
      <h1 className={styles.title}>图片上传组件测试</h1>
      <div>
        <ImageUpload
        action={''}
        fileList={[]}/>
      </div>
    </div>
    <div>
      <h1 className={styles.title}>地址栏选择组件测试</h1>
      <div>
        <Button onClick={() => {
            setAddressMapVisible(true);
          }
        }>点击</Button>
        <input value={address} style={{ width: '200px'}}/>
        <div style={{ height: '0', position: 'relative' }}>
          <AddressChooseMap
            visible={addressMapVisible}
            onHide={() => {
              setAddressMapVisible(false);
            }}
            onAddressSelected={(data: any) => {
              setAddress(data.address)
              console.log('data:', data.address)
              setAddressMapVisible(false);
            }}
          />
      </div>
    </div>
      <div>
        <h1 className={styles.title}>富文本组件测试</h1>
        <div style={{display: 'flex'}}>
          <div style={{width: '600px'}}>
            <RichTextEditor
              initialValue="test"
              onEditorChange={(val) => {
                setHtmlContent(val)
              }}
              uploadBasePath={"https://smartag-dev.health2m.com"}
            />
          </div>
          <div style={{marginLeft: '20px'}}>
            <HTMLPreview contentHTML={htmlContent}/>
          </div>
        </div>
        <Button>图片预览</Button>
      </div>
  </div>
  </div>
}
